<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class="btn">
    <button data-path="/home">首页</button>
    <button data-path="/news">新闻</button>
    <button data-path="/login">音乐</button>
</div>
<div id="com"></div>
<script>
    const oCom = document.getElementById("com");
    const oBtns = document.querySelectorAll(".btn button")

    const routes = [
        {path:"/home",component:"我的首页"},
        {path:"/news",component:"新闻详情"},
        {path:"/login",component:"登陆页面"},
    ]
    oBtns.forEach(item=>{
        item.onclick = function (){
            //
            history.pushState(null,null,this.dataset.path)
            routes.forEach(item=>{
                if(item.path === this.dataset.path){
                    oCom.innerHTML = item.component
                }
            })
        }
    })
    //用onpopstate事件来监听浏览器回退历史记录
    window.onpopstate = function (){
        console.log(location.pathname)
        routes.forEach(item=>{
            if(item.path === location.pathname){
                oCom.innerHTML = item.component
            }
        })
    }
</script>
</body>
</html>